//数据统计--订单报表
App.util.ns('Admin.Experience.Stats');
App.pages.add((function(){
    var NS = Admin.Experience.Stats;
    var page = new App.Page({
        name: 'experience/stats/index'
    });
    page.jobs = [];
    page.flushData = function(month){
        App.util.request.getData({
            url: 'admin/experience/stats/index',
            data: {
                month: month
            },
            loading: new App.Loading({container: page.contentContainer}),
            success: function(data){
                for(var i in page.jobs){
                    page.jobs[i](data);
                }
            }
        });
    };
    //页面初始化
    page.initStack.add('dataTable', function(){
        //面包屑导航
        this.setBreadcrumb([{
            icon: '<i class="fa fa-bar-chart-o"></i>',
            content: '数据统计'
        }, {
            content: '订单报表'
        }]);
        this.setContent($(`
            <style>
                .filter-container{
                    width: 100%;
                    height: 34px;
                    margin-top: 15px;
                }
                .date-name{
                    width: 120px;
                    height: 34px;
                    display: inline-block;
                    float: left;
                    line-height: 34px;
                }
                .date-selector{
                    width: 220px;
                    height: 34px;
                    display: inline-block;
                    margin-left: 10px;
                    float: left;
                }
                .title-container{
                    border-bottom: 1px solid #ededed;
                    position: relative;
                    padding: 10px 0;
                    margin: 15px 0 0 0;
                }
                .title-flag{
                    border-left: 5px solid #f26f20;
                    margin-right: 10px;
                }
                .title-explain{
                    color: #999;
                    font-size: 12px;
                    position: absolute;
                    right: 0;
                    top: 10px;
                }
                .stats-block{
                    width: 100%;
                    height: 150px;
                }
                .stats-block-top{
                    width: 100%;
                    height: 96px;
                    border: 1px solid #ccc;
                    text-align: center;
                }
                .stats-block-bottom{
                    width: 100%;
                    height: 54px;
                }
                .stats-block-left{
                    width: 50%;
                    height: 100%;
                    float: left;
                    border-left: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    text-align: center;
                    padding-top: 6px;
                }
                .stats-block-right{
                    width: 50%;
                    height: 100%;
                    float: left;
                    border-left: 1px solid #ccc;
                    border-right: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    text-align: center;
                    padding-top: 6px;
                }
                .stats-block-value{
                    color: #454545;
                    font-size: 34px;
                }
                .stats-block-text{
                    color: #999;
                    font-size: 14px;
                }
                .stats-block-value-sm{
                    color: #454545;
                    font-size: 14px;
                }
                .stats-block-text-sm{
                    color: #999;
                    font-size: 12px;
                }
            </style>
            <div style="padding: 0 15px;">
                <div class="filter-container">
                    <div class="date-name">
                        <span class="title-flag"></span>
                        <span>选择要统计的月份</span> 
                    </div>
                    <div class="date-selector"></div>
                </div>
                <div class="title-container">
                    <span class="title-flag"></span> 
                    <span><span class="month-name"></span>订单数据概览</span> 
                    <div class="title-explain">"--" 代表数据更新中</div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="stats-block">
                            <div class="stats-block-top">
                                <span class="stats-block-value data-user-total">--</span>
                                <div class="stats-block-text">
                                    <span>总订单数</span>
                                </div>
                            </div>
                            <div class="stats-block-bottom">
                                <div class="stats-block-left">
                                    <span class="stats-block-value-sm data-user-incr-month">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较上个月</span>
                                    </div>
                                </div>
                                <div class="stats-block-right">
                                    <span class="stats-block-value-sm data-user-incr-avg">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较平均值</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="stats-block">
                            <div class="stats-block-top">
                                <span class="stats-block-value data-times-total">--</span>
                                <div class="stats-block-text">
                                    <span>总订单完成数（次）</span>
                                </div>
                            </div>
                            <div class="stats-block-bottom">
                                <div class="stats-block-left">
                                    <span class="stats-block-value-sm data-times-incr-month">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较上个月</span>
                                    </div>
                                </div>
                                <div class="stats-block-right">
                                    <span class="stats-block-value-sm data-times-incr-avg">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较平均值</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="stats-block">
                            <div class="stats-block-top">
                                <span class="stats-block-value data-time-total">--</span>
                                <div class="stats-block-text">
                                    <span>总待支付数（次）</span>
                                </div>
                            </div>
                            <div class="stats-block-bottom">
                                <div class="stats-block-left">
                                    <span class="stats-block-value-sm data-time-incr-month">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较上个月</span>
                                    </div>
                                </div>
                                <div class="stats-block-right">
                                    <span class="stats-block-value-sm data-time-incr-avg">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较平均值</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="stats-block">
                            <div class="stats-block-top">
                                <span class="stats-block-value data-amount-total">--</span>
                                <div class="stats-block-text">
                                    <span>总收入（元）</span>
                                </div>
                            </div>
                            <div class="stats-block-bottom">
                                <div class="stats-block-left">
                                    <span class="stats-block-value-sm data-amount-incr-month">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较上个月</span>
                                    </div>
                                </div>
                                <div class="stats-block-right">
                                    <span class="stats-block-value-sm data-amount-incr-avg">-- --</span>
                                    <div class="stats-block-text-sm">
                                        <span>较平均值</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title-container">
                    <span class="title-flag"></span> 
                    <span><span class="month-name"></span>订单状态对比分析</span> 
                    <div class="title-explain"></div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-sm-12">
                        <div class="panel panel-default" style="border-radius: 0;">
                            <div class="panel-body">
                                <div class="goods-month-times-percent" style="height: 320px;">
                                </div>
                            </div>
                            <div class="panel-footer text-center" style="background-color: #fff;border-radius: 0;">
                                <span class="month-name"></span>订单状态占比
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-sm-12">
                        <div class="panel panel-default" style="border-radius: 0;">
                            <div class="panel-body">
                                <div class="goods-month-time-percent" style="height: 320px;">
                                </div>
                            </div>
                            <div class="panel-footer text-center" style="background-color: #fff;border-radius: 0;">
                                <span class="month-name"></span>费用占比
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="title-container">
                    <span class="title-flag"></span> 
                    <span><span class="month-name"></span>各仪器使用趋势分析</span> 
                    <div class="title-explain"></div>
                </div>
                <div class="row" style="margin-top: 10px;">-->
                    <!--<div class="col-sm-12">-->
                        <!--<div class="panel panel-default" style="border-radius: 0;">-->
                            <!--<div class="panel-body">-->
                                <!--<div class="goods-month-times-trend" style="height: 410px;">-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="panel-footer text-center" style="background-color: #fff;border-radius: 0;">-->
                                <!--<span class="month-name"></span>仪器使用次数趋势-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="row" style="margin-top: 10px;">-->
                    <!--<div class="col-sm-12">-->
                        <!--<div class="panel panel-default" style="border-radius: 0;">-->
                            <!--<div class="panel-body">-->
                                <!--<div class="goods-month-time-trend" style="height: 410px;">-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="panel-footer text-center" style="background-color: #fff;border-radius: 0;">-->
                                <!--<span class="month-name"></span>仪器使用时长趋势-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        `));
        var date = new App.Form.DateMonth({
            name: 'month',
            onChange: function (self){
                var month = App.util.formator.date(self.value()).substring(0, 7);
                page.flushData(month);
            }
        });
        page.frame.find('.filter-container .date-selector').append(date.frame);
        page.jobs.push(function(data){
            page.frame.find('.month-name').text(data.monthName);
            var global = data.global;
            //总使用用户
            page.frame.find('.data-user-total').text(global.user.total);//用户总数
            page.frame.find('.data-user-incr-month').text(global.user.incrMonth);//较上个月增长
            page.frame.find('.data-user-incr-avg').text(global.user.incrAvg);//较平均值增长
            //使用次数
            page.frame.find('.data-times-total').text(global.times.total);//总使用次数
            page.frame.find('.data-times-incr-month').text(global.times.incrMonth);//较上个月增长
            page.frame.find('.data-times-incr-avg').text(global.times.incrAvg);//较平均值增长
            //总使用时长
            //var totalTime = global.time.total ? parseFloat(parseInt(global.time.total)/3600).toFixed(2) : 0;
            page.frame.find('.data-time-total').text(global.time.total);//总使用时长
            page.frame.find('.data-time-incr-month').text(global.time.incrMonth);//较上个月增长
            page.frame.find('.data-time-incr-avg').text(global.time.incrAvg);//较平均值增长
            //总产生费用
            //page.frame.find('.data-amount-total').text(parseFloat(global.amount.total).toFixed(2));//总费用
            page.frame.find('.data-amount-total').text(global.amount.total);
            page.frame.find('.data-amount-incr-month').text(global.amount.incrMonth);//较上个月增长
            page.frame.find('.data-amount-incr-avg').text(global.amount.incrAvg);//较平均值增长
            //各仪器使用情况对比
            var timesData = data.group.times;
            var timeData = data.group.time;
            var timesItems = [];
            var timeItems = [];
            for(var i in timesData){
                timesItems.push(timesData[i].name);
            }
            for(var i in timeData){
                timeItems.push(timeData[i].name);
            }
            echarts.init(page.frame.find('.goods-month-times-percent').first()[0]).setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    x: 'left',
                    data: timesItems
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['40%', '55%'],
                        data: timesData
                    }
                ]
            });
            echarts.init(page.frame.find('.goods-month-time-percent').first()[0]).setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    x: 'left',
                    data: timeItems
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['40%', '55%'],
                        data: timeData
                    }
                ]
            });



            // //各仪器使用使用趋势
            // var goodsTimesData = data.goods.times;
            // var goodsTimeData = data.goods.time;
            // echarts.init(page.frame.find('.goods-month-times-trend').first()[0]).setOption({
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         type: 'scroll',
            //         orient: 'vertical',
            //         x: 'left',
            //         top: '20px',
            //         data: goodsTimesData.goods
            //     },
            //     grid: {
            //         top: '20px',
            //         left: '220px',
            //         right: '20px',
            //         bottom: '10px',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: goodsTimesData.days
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: goodsTimesData.data
            // });
            // echarts.init(page.frame.find('.goods-month-time-trend').first()[0]).setOption({
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         type: 'scroll',
            //         orient: 'vertical',
            //         x: 'left',
            //         top: '20px',
            //         data: goodsTimeData.goods
            //     },
            //     grid: {
            //         top: '20px',
            //         left: '220px',
            //         right: '20px',
            //         bottom: '10px',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: goodsTimeData.days
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: goodsTimeData.data
            // });

        });
        page.flushData();
    });
    //页面刷新
    page.refreshStack.add('dataTable', function(){
        
    });
    //页面销毁
    page.destroyStack.add('dataTable', function(){
    });
    return page;
})());